<template>
  <div class="up-pic-box">
    <!-- 上传loading -->
    <!-- 上传动作 -->
    <template v-if="uploading">
      <div v-loading="uploading" element-loading-text="图片上传中QAQ" element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)">

      </div>
    </template>
    <!-- 不在上传的时候 -->
    <template v-else>
      <!-- 有图片地址的时候 显示 -->
      <template v-if="imgUrl">
        <img :src="imgUrl" />
        <p class="pic-tips" @click="editImg">更换图片</p>
      </template>
      <!-- 没有图片地址的时候 -->
      <template v-else>
        <div class="not-pic" @click="editImg">
          <i class="el-icon-plus"></i>
          <p v-if="addPlaceHolder">
            {{ addPlaceHolder }}
          </p>
        </div>
      </template>
    </template>
    <!-- 上传框 -->
    <el-upload v-show="false" ref="upload" :action="upLoadUrl" :multiple="false" list-type="picture"
      :show-file-list="false" :on-success="doSuccess" :on-error="doError" :before-upload="beforeUpload"
      :headers="headers">
      <button>按钮</button>

    </el-upload>
  </div>
</template>

<script>
import { upLoadUrl } from '@/api/index'
export default {
  props: {
    imgUrl: {
      type: String,
      default: ''
    },
    addPlaceHolder: {
      type: String,
      default: '添加图片'
    },
  },
  mounted() {
    console.log(this.upLoadUrl, 'uploarullll');
  },
  data() {
    return {
      //控制是否加载
      uploading: false,
      //后端地址
      upLoadUrl: upLoadUrl,
      headers: {
        'X-token': localStorage.getItem('token')
      }
    }
  },
  methods: {
    //更换图片
    editImg() {
      //upload组件里要触发上传事件需要点击内部的button按钮 通过ref找到dom元素然后触发button按钮的click事件
      this.$refs.upload.$el.querySelector('button').click()
    },
    //上传失败
    doError() {

    },
    //上传前的处理函数
    beforeUpload(file) {
      //file 为拿到的上传文件数据
      //对文件类型的判断
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      //对文件大小的判断
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('上传图片只能是JPG/PNG格式噢')
      }
      if (!isLt2M) {
        this.$message.error('上传图片大于2M')
      }
      //如果校验通过 往下执行 不通过 返回false 阻止进行
      if (isJPG && isLt2M) {
        this.uploading = true
        console.log('合格111');
        return true
      } else {
        return false
      }
    },
    //上传成功
    doSuccess(response, file, fileList) {
      //关闭上传状态
      this.uploading = false
      //把值传给父组件
      this.$emit('update:imgUrl', response.data)
      console.log(response.data, 'suceess url',this.imgUrl);
    },
  }
};
</script>

<style lang="less" scoped>
// 上传图片模块样式
.up-pic-box {
  position: relative;
  width: 60px;
  height: 60px;
  border: 1px solid #e5e5e5;
  background: #fff;
  text-align: center;

  img {
    width: 100%;
    height: 100%;
  }

  .pic-tips {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20px;
    line-height: 20px;
    font-size: 12px;
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    cursor: pointer;
  }

  .not-pic {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
    color: @color-1;
    cursor: pointer;

    i {
      font-size: 20px;
    }

    p {
      margin-top: 4px;
    }
  }

  .el-loading-parent--relative {
    width: 100%;
    height: 100%;
    display: inline-block;

    .el-loading-text {
      font-size: 12px !important;
    }
  }
}
</style>